<template>
  <div class="container">

    <div class="bottom-bar flex-row flex--x-center flex-y-center">
        <div class="flex-grow-0 quanxuan" @click="checkAll">
        	<img class="picker"  v-if="!totalCheck" src='@/assets/images/icon/no.png'></img>
            <img class="picker"  v-if="totalCheck" src='@/assets/images/icon-red/yes.png'></img>
            <span>全选</span>
        </div>
          
      	<div class="flex-grow-1 flex-col">
      	    <div>合计：<span class="moneyColor">￥{{total}}</span></div>
      	    <div>免费运费</div>
      	</div>
      	<div class="flex-grow-0 btn delete" @click='edit'>删除</div>
      	<div class="flex-grow-0 btn jiesun" @click='jiesuan'>去结算</div>
      </div>

  <div class="flex flex-x-center flex-y-center lingjuan">
  	<img class="flex-grow-0" src="@/assets/images/icon/goods-detail-service.png">
  	<span class="flex-grow-1 moneyColor flex-x-center flex-y-center">领券使用</span>
  	<img class="flex-grow-0" src="@/assets/images/icon/set-gray.png">
  </div>
    <div class="list">
      <div class="item flex-col" v-for="item,index in goods_list">
      <div class="flex-row info bd-bottom">
      	 <div class="flex-x-center flex-y-center" @click="itemSelect(index)">
          	<img class="picker" v-if='!item.checked' src='@/assets/images/icon/no.png'></img>
            <img class="picker" v-if='item.checked' src='@/assets/images/icon-red/yes.png'></img>
          </div>
          <img class="yifupic" src="http://imgsrc.baidu.com/imgad/pic/item/34fae6cd7b899e51fab3e9c048a7d933c8950d21.jpg">
          <div class="flex-grow-1 flex-row">
            <div class="flex-grow-1 flex-col">
              <div class="flex-grow-1 flex-y-center title">{{item.name}}</div>
              <div class="subtit">尺码：{{item.unit}}</div>
              <div class="subtit">颜色：灰色</div>
              <div class="subtit">预约到货时间：2018年5月1日</div>
            </div>
            <div class="flex-grow-0 flex-col">
            	  <div class="flex-grow-0">租金：<span class='moneyColor'>{{item.price}}</span></div>
	              <div class="flex-grow-0">押金：<span class='moneyColor'>{{item.deposit}}</span></div>
	              <div class="edit-num flex-grow-1 flex-y-center">
	                 <i class="el-icon-minus" @click="changenum(-1,index)"></i>
	                 <input value="1" type="number">
	                 <i class="el-icon-plus" @click="changenum(1,index)"></i>
	              </div>
            </div>
            </div>
      </div>
	      <div class="flex-y-center xiaoji">
	      	小计：<span class="moneyColor">￥ 350.00</span>
	      </div>
          </div>
        </div>
      </div>
    </div>
   

</div>
</template>
<script>
export default ({
  data() {
    return {
    	totalCheck:false,
    	total:998,
      goods_list: [{
          "id": "87",
          "name": "LV宴会晚礼服2018新款",
          "price": "100/5天",
          "pic_url": "/images/qunzi.jpg",
          "num": "8",
          "virtual_sales": "0",
          "unit": "件",
          "sales": "185",
          "deposit": '150/件'
        },
        {
          "id": "87",
          "name": "LV宴会晚礼服2018新款",
          "price": "100/5天",
          "pic_url": "/images/qunzi.jpg",
          "num": "8",
          "virtual_sales": "0",
          "unit": "件",
          "sales": "185",
          "deposit": '150/件'
        },
        {
          "id": "87",
          "name": "LV宴会晚礼服2018新款",
          "price": "100/5天",
          "pic_url": "/images/qunzi.jpg",
          "num": "8",
          "virtual_sales": "0",
          "unit": "件",
          "sales": "185",
          "deposit": '150/件'
        },
        {
          "id": "87",
          "name": "LV宴会晚礼服2018新款",
          "price": "100/5天",
          "pic_url": "/images/qunzi.jpg",
          "num": "8",
          "virtual_sales": "0",
          "unit": "件",
          "sales": "185",
          "deposit": '150/件'
        },
        {
          "id": "87",
          "name": "LV宴会晚礼服2018新款",
          "price": "100/5天",
          "pic_url": "/images/qunzi.jpg",
          "num": "8",
          "virtual_sales": "0",
          "unit": "件",
          "sales": "185",
          "deposit": '150/件'
        },
        {
          "id": "87",
          "name": "LV宴会晚礼服2018新款",
          "price": "100/5天",
          "pic_url": "/images/qunzi.jpg",
          "num": "8",
          "virtual_sales": "0",
          "unit": "件",
          "sales": "185",
          "deposit": '150/件'
        },
        {
          "id": "87",
          "name": "LV宴会晚礼服2018新款",
          "price": "100/5天",
          "pic_url": "/images/qunzi.jpg",
          "num": "8",
          "virtual_sales": "0",
          "unit": "件",
          "sales": "185",
          "deposit": '150/件'
        },
        {
          "id": "87",
          "name": "LV宴会晚礼服2018新款",
          "price": "100/5天",
          "pic_url": "/images/qunzi.jpg",
          "num": "8",
          "virtual_sales": "0",
          "unit": "件",
          "sales": "185",
          "deposit": '150/件'
        },
        {
          "id": "87",
          "name": "LV宴会晚礼服2018新款",
          "price": "100/5天",
          "pic_url": "/images/qunzi.jpg",
          "num": "8",
          "virtual_sales": "0",
          "unit": "件",
          "sales": "185",
          "deposit": '150/件'
        },
        {
          "id": "87",
          "name": "LV宴会晚礼服2018新款",
          "price": "100/5天",
          "pic_url": "/images/qunzi.jpg",
          "num": "8",
          "virtual_sales": "0",
          "unit": "件",
          "sales": "185",
          "deposit": '150/件'
        },

      ]
    }
  },
  methods:{
  	itemSelect(index){
	    let goods_list = this.goods_list;
	    goods_list[index].checked = (goods_list[index].checked?false:true)
	    if (!goods_list[index].checked) {
           this.totalCheck = false;
	    };
	    console.log(goods_list[index].checked);
	    this.goods_list = goods_list;

	    //强制重新渲染
	    this.$forceUpdate(); 
  	},
  	checkAll(){
	    let goods_list = this.goods_list;
	    let totalCheck = false;
	    if (this.totalCheck) {
	      totalCheck = false;
	    } else {
	      totalCheck = true;
	    }
	    for (let i in goods_list) {
	        goods_list[i].checked = totalCheck;
	    }
	    this.goods_list = goods_list;
	    this.totalCheck = !this.totalCheck
  	},
  	changenum(count,index){
  		
  	},
  	//删除
  	edit(){

  	},
  	//结算
  	jiesuan(){
          this.$router.push({name:"jiesuan"})
  	}
  }
})

</script>
<style scoped lang="less">    
.container{
	background-color:#eee;
}
.lingjuan{
	height:2rem;
	background-color:#fff;
	font-size:.7rem;
	img{
		margin:0 1rem;
		height:1rem;
		width:1rem;
	}
}
.list{
	position:fixed;
	width:100%;
	bottom:5rem;
	top:2.1rem;
	overflow-y:scroll;
	left:0;
	.item{
		font-size:.55rem;
		letter-spacing:1px;
		.info{
			padding:.5rem 0;
		}
		background-color:#fff;
		margin:.5rem 0;
		.edit-num{
			font-size:.6rem;
			input{
				width: 2rem;
				border: none;
				text-align: center;
			}
			
		}
		.title{
		font-size:.6rem;
		}
		padding:.5rem;
		
		.yifupic{
		margin:0 .5rem;
		height:4rem;
		width:4rem;
		}
		.xiaoji{
			justify-content:flex-end;
			padding:.5rem 0;
			text-align:right;
		}
	}
}
.bottom-bar{
	height:2.4rem;
	width:100%;
	position:fixed;
	bottom:2.5rem;
	font-size:.7rem;
	left:0;
	background-color:#fff;
	.quanxuan{
		margin:0 .5rem;
	}
	.btn{
		height:2.4rem;
		width:4rem;
		line-height:2.4rem;
		text-align:center;
		color:#fff;
	}
	.delete{
		background-color:#cccccc
	}
	.jiesun{
		background-color:#F75B93;
	}
}

.picker{
	height:1rem;
	width:1rem;
}
</style>
